// 脚部文件是不变的

<template>
  <div class="footer">
    <div class="nav">
      <div class="item" v-for="item,i in nav" v-bind:key="i">
        <a v-bind:href="item.src">{{item.title}}</a>
      </div>
    </div>
    <div class="info">
      <p>Copyright © 2014~2018 The Paper All rights reserved.</p>
      <p>互联网新闻信息服务许可证：31122222006</p>
      <p>沪ICP证：沪B2-123123123 </p>
      <p>沪ICP备6666666号</p>
      <p>
        <span><img src="../../assets/common/img/ghs.png"></span>沪公网安备 12312321321329号</p>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      // 底部的导航信息
      nav: [
        { title: "关于我们", src: "#" },
        { title: "联系我们", src: "#" },
        { title: "版权声明", src: "#" },
        { title: "一起工作", src: "#" },
        { title: "NewsNew广告", src: "#" }
      ]
    };
  },
  created: function() {
    // 获得数据
  }
};
</script>
<style lang="less">
@rem: 72rem;
.footer {
  // 脚部字体都是居中显示
  margin-top: 20px;
  text-align: center;
  color: #cacacb;
  > .nav {
    width:100%; 
    background-color: #2e2d33;
    overflow: hidden;
    border-bottom: 1px solid #888;
    > .item {
      font-size: 17em;
      float: left;
      height: 60 / @rem;
      line-height: 60 / @rem;
      width: 33.3%;
      a {
        color: #cacacb;
        &:hover {
          color: rgb(255, 255, 255);
        }
      }
    }
  }
  > .info {
    padding: 10 / @rem 0;
    line-height: 25 / @rem;
    font-size: 13em;
    background-color: #222126;
    img {
      vertical-align: bottom;
      width: 25 / @rem;
      height: 25 / @rem;
      margin-right: 4px;
    }
    p:last-child {
      height: 25 / @rem;
    }
  }
}
</style>